<script setup>
import FirstTitle from "@comp/FirstTitle";
import { searchDataRyfh } from "@/api/search";
import { addOrUpdateRyfh } from "@/api/addOrUpdate";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

import { onMounted } from "vue";
import { postTableData } from "@/api/table";

const city = window.globalObj.name;

const editorRef10 = shallowRef();
const valueHtml10 = ref(
  `全市共有人防工程XX个，建筑面积XX㎡，使用面积XX㎡，可容纳XX人。具体情况如下：`
);
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 = ref(`我市目前尚无。`);
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};
const editorRef12 = shallowRef();
const valueHtml12 = ref(`共XX个掩蔽场所,总面积XX㎡，可掩蔽XX人`);
const toolbarConfig12 = {};
const editorConfig12 = { placeholder: "请输入内容..." };
const mode12 = ref("default");
const handleCreated12 = (editor) => {
  editorRef12.value = editor; // 记录 editor 实例，重要！
};
const editorRef13 = shallowRef();
const valueHtml13 = ref(
  `共有XX个疏散地域，当地人口总数XX人，可接收人口XX人。具体情况如下：`
);
const toolbarConfig13 = {};
const editorConfig13 = { placeholder: "请输入内容..." };
const mode13 = ref("default");
const handleCreated13 = (editor) => {
  editorRef13.value = editor; // 记录 editor 实例，重要！
};
const editorRef14 = shallowRef();
const valueHtml14 = ref(
  `全市共有疏散基地6个，占地面积约为 391.61万平方米,可接收安置31780人。具体情况如下`
);
const toolbarConfig14 = {};
const editorConfig14 = { placeholder: "请输入内容..." };
const mode14 = ref("default");
const handleCreated14 = (editor) => {
  editorRef14.value = editor; // 记录 editor 实例，重要！
};

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};
const tableData = ref([]);

// 人防工程情况统计表
const gcqkList = ref([]);
const getGcqkData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "renfanggongchengqingkuangtongji",
  }).then((res) => {
    if (res.code === 200) {
      gcqkList.value = res?.data || [];
    }
  });
};
// 兼顾人防要求的地下工程情况统计表
const jgrfList = ref([]);
const getJgrfData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "jiangurenfangyaoqiudixiagongchengqingkuang",
  }).then((res) => {
    if (res.code === 200) {
      jgrfList.value = res?.data || [];
    }
  });
};
// 掩蔽场所情况统计表
const yncsList = ref([]);
const getYbcsData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "zhebichangsuoqingkuangtongji",
  }).then((res) => {
    if (res.code === 200) {
      yncsList.value = res?.data || [];
    }
  });
};
// 疏散地域情况统计表
const ssdyList = ref([]);
const getSsdyData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "shusandiyuqinguangtongji",
  }).then((res) => {
    if (res.code === 200) {
      ssdyList.value = res?.data || [];
    }
  });
};
// 疏散基地情况统计表
const ssjdList = ref([]);
const getSsjdData = () => {
  return postTableData({
    docType: "protectioaction",
    method: "shusanjidiqingkuang",
  }).then((res) => {
    if (res.code === 200) {
      ssjdList.value = res?.data || [];
    }
  });
};

// 加载html
const initHtml = () => {
  searchDataRyfh({ m: "任务需求掩蔽能力现状" }).then((res) => {
    const { data } = res;
    valueHtml10.value = data.find((x) => x.k === "人防工程现状")?.v || "";
    valueHtml11.value =
      data.find((x) => x.k === "兼顾人防要求的地下工程现状")?.v || "";
    valueHtml12.value = data.find((x) => x.k === "掩蔽场所现状")?.v || "";
    valueHtml13.value = data.find((x) => x.k === "疏散地域现状")?.v || "";
    valueHtml14.value = data.find((x) => x.k === "疏散基地现状")?.v || "";
  });
};
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateRyfh({
      m: "任务需求掩蔽能力现状",
      data: [
        {
          k: "人防工程现状",
          v: valueHtml10.value,
        },
        {
          k: "兼顾人防要求的地下工程现状",
          v: valueHtml11.value,
        },
        {
          k: "掩蔽场所现状",
          v: valueHtml12.value,
        },
        {
          k: "疏散地域现状",
          v: valueHtml13.value,
        },
        {
          k: "疏散基地现状",
          v: valueHtml14.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(async () => {
  initHtml();
  await getGcqkData();
  await getJgrfData();
  await getYbcsData();
  await getSsdyData();
  await getSsjdData();
});

onBeforeUnmount(() => {
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
  if (editorRef12.value) editorRef12.value.destroy();
  if (editorRef13.value) editorRef13.value.destroy();
  if (editorRef14.value) editorRef14.value.destroy();
});
</script>
<template>
  <div class="">
    <FirstTitle name="人防工程现状" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>

    <div class="text-center top-15">
      {{ city }}人防工程情况统计表（单位:个）
    </div>
    <el-table
      id="table"
      :data="gcqkList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区划" />
      <el-table-column prop="total" label="工程总数" />
      <el-table-column prop="zhihuitongxin" label="指挥通信工程" />
      <el-table-column prop="yiliaojiuhu" label="医疗救护工程" />
      <el-table-column prop="zhuanyedui" label="专业队工程" />
      <el-table-column prop="renyuanyanbi" label="人员掩蔽工程" />
      <el-table-column prop="wuzichubei" label="物资储备工程" />
      <el-table-column prop="other" label="其它人防工程" />
      <el-table-column prop="area" label="使用面积(㎡)" />
      <el-table-column prop="peopleNum" label="可容纳人数" />
    </el-table>

    <FirstTitle name="兼顾人防要求的地下工程现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>
    <div class="text-center top-15">
      {{ city }}兼顾人防要求的地下工程情况统计表（单位:个）
    </div>
    <el-table
      id="table"
      :data="jgrfList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区划" />
      <el-table-column prop="total" label="总数" />
      <el-table-column prop="area" label="使用面积(㎡)" />
      <el-table-column prop="peopleNum" label="可容纳人数" />
    </el-table>

    <FirstTitle name="掩蔽场所现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef12"
        :defaultConfig="toolbarConfig12"
        :mode="mode12"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml12"
        :defaultConfig="editorConfig12"
        :mode="mode12"
        @onCreated="handleCreated12"
      />
    </div>
    <div class="text-center top-15">{{ city }}掩蔽场所情况统计表</div>
    <el-table
      id="table"
      :data="yncsList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区划" />
      <el-table-column prop="num" label="数量（个）" />
      <el-table-column prop="area" label="面积（㎡）" />
      <el-table-column prop="accept_population" label="可掩蔽人数(人)" />
    </el-table>

    <FirstTitle name="疏散地域现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef13"
        :defaultConfig="toolbarConfig13"
        :mode="mode13"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml13"
        :defaultConfig="editorConfig13"
        :mode="mode13"
        @onCreated="handleCreated13"
      />
    </div>
    <div class="text-center top-15">
      {{ city }}疏散地域情况统计表（单位:人）
    </div>
    <el-table
      id="table"
      :data="ssdyList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="使用单位" />
      <el-table-column prop="num" label="疏散地域数量" />
      <el-table-column prop="accept_population" label="疏散地域人口数" />
      <el-table-column prop="local_population" label="可接收人口数" />
    </el-table>

    <FirstTitle name="疏散基地现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef14"
        :defaultConfig="toolbarConfig14"
        :mode="mode14"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml14"
        :defaultConfig="editorConfig14"
        :mode="mode14"
        @onCreated="handleCreated14"
      />
    </div>
    <div class="text-center top-15">{{ city }}疏散基地情况统计表</div>
    <el-table
      id="table"
      :data="ssjdList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区划" />
      <el-table-column prop="name" label="基地名称" />
      <el-table-column prop="an" label="地址" />
      <el-table-column prop="jzhu_area" label="建筑面积（㎡）" />
      <el-table-column prop="area" label="使用面积（㎡）" />
      <el-table-column prop="anzhi_count" label="可安置人员（人）" />
    </el-table>
    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>